<template>
  <div class="component__live_card_new" @click="toPath(detail.id)">
    <div :class="['bg-img',!isLiveStart?'filter':'']" :style="{backgroundImage: `url(${detail.avatar})`}"></div>
    <div class="is-living-box" v-if="isLiveStart">
      <div class="living">直播中</div>
      <div class="teacher-name">{{detail.acName}}</div>
      <div class="course-name">{{detail.courseName}}</div>
    </div>
    <div class="notis-living-box" v-else>
      <div class="live-count-down">
        <div>直播倒计时:</div>
        <div><span v-if="Number(timeObj.days) > 0">{{timeObj.days}}天</span>{{timeObj.hours}}小时{{timeObj.minutes}}分{{timeObj.seconds}}秒</div>
      </div>
      <div class="teacher-name">{{detail.acName}}</div>
      <div class="course-name">{{detail.courseName}}</div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getLiveCourseChapter } from "~/api/course";
export default {
  props: ["detail", "isClearTimes"],
  components: {},
  data() {
    return {
      course: {},
      videoVoList: [],
      timeObj:{
        days:"0",
        hours:"00",
        minutes:"00",
        seconds:"00"
      },//直播倒计时对象
      timeTimer:null,//直播倒计时定时器
    };
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    },
    isLiveStart() {
      if (this.videoVoList.length > 0) {
        return (this.videoVoList[0].liveEndTime > new Date().getTime()) && (this.videoVoList[0].liveStartTime < new Date().getTime());
      } else {
        return false;
      }
    },
  },
  watch: {
  },
  activated() {
  },
  deactivated() {
    
  },
  methods: {
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    },
    countDown(){
      
      console.log("开启定时器");
      this.timeTimer = setInterval(() => {
        let newTime = this.videoVoList[0]["liveStartTime"] - new Date().getTime();  //距离结束时间的毫秒数
        let leftd = Math.floor(newTime/(1000*60*60*24));  //计算天数
        let lefth = Math.floor(newTime/(1000*60*60)%24);  //计算小时数
        let leftm = Math.floor(newTime/(1000*60)%60);  //计算分钟数
        let lefts = Math.floor(newTime/1000%60);  //计算秒数
        let add0 = m => {
          return m < 10 ? "0" + m : m;
        };
        // console.log(leftd + "天" + add0(lefth) + ":" + add0(leftm) + ":" + add0(lefts));  //返回倒计时的字符串
        if(newTime <= 0){
          clearInterval(this.timeTimer);
          this.timeTimer = null;
        }
        this.timeObj = {
          days : leftd,
          hours : add0(lefth),
          minutes : add0(leftm),
          seconds : add0(lefts),
        }
      }, 1000);
    },
    async getCourseChapter(courseId) {
      let result = await getLiveCourseChapter({ courseId });
      if (result && result.data.code == 200) {
        this.course = result.data.data;
        this.videoVoList = result.data.data.videoVoList;
        let start = this.videoVoList[0].liveStartTime;
        let time = new Date().getTime()
        if(start > time){
          this.countDown();
        }
        console.log("直播课程章节=====", this.course);
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
    }
  },
  created() {
      this.getCourseChapter(this.detail.id);
    console.log(this.detail);
  },
  mounted() {},
  activated() {}
};
</script>
<style lang="scss" scoped>
.component__live_card_new {
  min-width: 2.688rem;
  height: 2.688rem;
  position: relative;
    border-radius: .1344rem;
    overflow: hidden;
    .bg-img{
      position: absolute;
      left: 0;
      top: 0;
      width: 2.688rem;
      height: 2.688rem;
      border-radius: .1344rem;
      background-repeat: no-repeat;
      background-size: cover;
      
      &.filter{
         filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        -ms-filter: blur(1px);
        -webkit-filter: blur(1px);
        //  filter: blur(.03rem);
        // -moz-filter: blur(.03rem);
        // -o-filter: blur(.03rem);
        // -ms-filter: blur(.03rem);
        // -webkit-filter: blur(.03rem);
      }
     
      // background-size: 100% 100%;
    }
    .is-living-box,.notis-living-box{
      position: relative;
      min-width: 2.688rem;
      height: 2.688rem;
      border-radius: .1344rem;
    }
    .notis-living-box{
      background: linear-gradient(180deg, rgba(20, 20, 21, 0) 0%, #171717 100%);
    }
    .live-count-down{
      position: absolute;
      top: .6432rem;
      left: 0rem;
      text-align: center;
      width: 100%;
      font-size: .2688rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 1.5;
    }
    .living{
      position: absolute;
      top: .1152rem;
      left: .1152rem;
      width: .96rem;
      height: .384rem;
      background: linear-gradient(134deg, #9C9AFF 0%, #B179FF 100%);
      border-radius: .096rem;
      border: 1px solid #FFFFFF;
      font-size: .192rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: .384rem;
      color: #FFFFFF;
    }
    .teacher-name{
      position: absolute;
      bottom: .6144rem;
      left: .24rem;
      font-size: .192rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
    .course-name{
      width: 100%;
      padding-left: .24rem;
      box-sizing: border-box;
      position: absolute;
      bottom: .24rem;
      left: 0rem;
      font-size: .2304rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
}
</style>
